<!-- 提货卡 -->
<template>
	<view class="commission-log-wrap">
		<view class="item-box">
			<!-- 提货卡列表 -->
			<view class="card-item" v-for="item in upgradecodeList">
				<view class="card-left">
					<view class="card-header">
						<view class="card-number">
							升级码：{{ item.code }}
							<text style="font-size:24rpx;font-weight:bold;margin-left:10rpx;" @click="copy(item.code)">复制</text>
						</view>
					</view>
					<view class="money-log">
						<view class="card-money">可升级为:{{ item.level_name }}</view>
					</view>
				</view>
				<view class="card-right">
					<view class="btn-go" v-if="item.status=='unused'">待使用</view>
					<view class="btn-go" v-if="item.status=='used'">已使用</view>
					<view class="btn-go" v-if="item.status=='disabled'">已禁用</view>
					<view class="card-time">{{ item.created_at }}</view>
				</view>
			</view>

			<view class="tabbar-foot safe-area-inset-bottom">
				<view class="detail-foot_box safe-area-inset-bottom u-flex">
					<view class="detail-right">
						<view class="detail-btn-box">
							<button class="u-reset-button score-btn" @tap="jump('upgradecode-use')">使用升级码升级</button>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 更多 -->
			<u-loadmore v-if="upgradecodeList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			<!-- 缺省页 -->
			<shopro-empty v-show="isEmpty" marginTop="100rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据"></shopro-empty>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			upgradecodeList: [], //佣金记录
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			isEmpty: false
		};
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
			agentInfo: ({ user }) => user.agentInfo
		})
	},
	onLoad() {
		this.getUpgradecodeList();
	},
	onPullDownRefresh() {
		this.upgradecodeList = [];
		this.currentPage = 1;
		this.lastPage = 1;
		this.getUpgradecodeList();
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		copy(data){
			uni.setClipboardData({
			    data: data,
			    success: function () {
			        uni.showToast({
			        	icon: 'none',
						title: "已复制到剪贴板"
			        })
			    }
			});
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},

		getUpgradecodeList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('user.upgradecodeList', {
					page: that.currentPage
				},
				'加载中...'
			).then(res => {
				uni.stopPullDownRefresh();
				if (res.code === 1) {
					that.upgradecodeList = [...that.upgradecodeList, ...res.data.data];
					that.lastPage = res.data.last_page;
					that.isEmpty = !that.upgradecodeList.length;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getUpgradecodeList();
			}
		}
	}
};
</script>

<style lang="scss">
.item-box {
	margin: 20rpx 0;
}
.card-item{
	margin:20rpx; 
	display:flex; 
	justify-content: space-between;
	height:100%;

	.card-left{
		border-radius:10rpx;
		background: #fff;
		width:60%;
		padding:10rpx;
		.card-header{
			.card-number{
				font-size:24rpx;
				padding:10rpx;
				color:#888;
			}
		}
		.money-log{
			display:flex;
			justify-content: flex-start;
			align-items: center;
			.card-money{
				padding:10rpx;
				font-size:26rpx;
				font-weight:bold;
				color:#666
			}
		}
	}
	.card-right{
		border-radius:10rpx;
		background:#Df6161;
		width:40%;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.btn-go{
			padding:10rpx 30rpx;
			border-radius:80rpx;
			font-size:24rpx;
			background: #fff;
			text-align: center;
			color:#cc0000;
			margin:10rpx;
		}
		.card-time{
			font-size:24rpx;
			padding:10rpx;
			color:#333;
		}
	}
}

.tabbar-foot {
	min-height: 100rpx;
	width: 100%;
}

.detail-foot_box {
	min-height: 100rpx;
	border-top: 1rpx solid rgba(238, 238, 238, 1);
	background-color: #fff;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 999;

	.detail-btn-box {
		.score-btn {
			width: 100vw;
			line-height: 80rpx;
			background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
			box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
			border-radius: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-right: 20rpx;
		}
	}
}
</style>
